<script setup lang="ts">
  import { ref, onMounted, computed } from 'vue';
  import * as Lodash from 'lodash';
  import SubTitle from '@/components/sub-title/index.vue';
  // import ImgData from '@/components/img-data/index.vue';
  import TextData from '@/components/text-data/index.vue';
  import ScrollTable from '@/views/big-screen/scroll-table.vue';
  import useECharts from '@/hooks/useECharts';
  import { updateAxisData, updateOptions } from '@/utils/echarts_util';
  import { dataDevice } from './data';
  import {
    ChartDeviceTypeOptions,
    ChartDeviceAlarmOptions,
    ChartDay30AlarmOptions,
  } from './options';

  const faultDeviceColumns = [
    {
      title: '故障设备名称',
      dataIndex: 'name',
    },
    {
      title: '设备编号',
      dataIndex: 'number',
    },
    {
      title: '关联长者',
      dataIndex: 'elder',
    },
    {
      title: '联系电话',
      dataIndex: 'phone',
    },
  ];
  const simDeviceColumns = Lodash.cloneDeepWith(faultDeviceColumns, (value) => {
    const value0 = Lodash.cloneDeep(value[0]);
    value0.title = '待续费设备名称';
    value[0] = value0;
    return value;
  });
  const alarmReltimeColumns = [
    {
      title: '设备名称',
      dataIndex: 'deviceName',
    },
    {
      title: '长者姓名',
      dataIndex: 'elderName',
    },
    {
      title: '报警时间',
      dataIndex: 'alarmDatetime',
    },
  ];

  const dataDeviceType = ref(Lodash.cloneDeep(dataDevice.smartDevice.type));
  const dataDeviceFault = ref(Lodash.cloneDeep(dataDevice.smartDevice.fault));
  const dataDeviceSim = ref(Lodash.cloneDeep(dataDevice.smartDevice.sim));
  const dataOverview = ref(Lodash.cloneDeep(dataDevice.overview));
  const dataDeviceEvent = ref(Lodash.cloneDeep(dataDevice.deviceEvent));
  const dataDay30Alarm = ref(
    Lodash.cloneDeep(dataDevice.deviceEvent.day30Alarm)
  );

  const dataOverviews = computed(() => {
    return [
      {
        name: '在装设备总数',
        value: dataOverview.value.deviceInstalling,
        img: 'src/assets/images/common/data_img1.png',
      },
      {
        name: '在线设备数量',
        value: dataOverview.value.deviceOnline,
        img: 'src/assets/images/common/data_img2.png',
      },
      {
        name: '在线率',
        value: dataOverview.value.deviceOnlineRate,
        img: 'src/assets/images/common/data_img3.png',
      },
    ];
  });

  const chartDeviceType = ref();
  const chartDeviceAlarm = ref();
  const chartDay30Alarm = ref();

  const { setOptions: setDeviceTypeOptions } = useECharts(chartDeviceType);
  const { setOptions: setDeviceAlarmOptions } = useECharts(chartDeviceAlarm);
  const { setOptions: setDay30AlarmOptions } = useECharts(chartDay30Alarm);

  const renderDay30Alarm = () => {
    const data = dataDay30Alarm.value;
    const xAxisData: any = [];
    const yAxisData: any = [];
    for (let i = 0; i < data.length; i += 1) {
      const item = data[i];
      xAxisData.push({
        name: item.date,
        value: item.alarmCount,
      });
      yAxisData.push(item.responseRate);
    }
    // console.log(xAxisData);
    setDay30AlarmOptions(
      updateOptions(
        updateAxisData(ChartDay30AlarmOptions, xAxisData, 'xAxis'),
        [xAxisData, yAxisData]
      )
    );
  };

  onMounted(() => {
    setDeviceTypeOptions(
      updateOptions(ChartDeviceTypeOptions, [dataDeviceType.value])
    );
    setDeviceAlarmOptions(
      updateOptions(ChartDeviceAlarmOptions, [
        dataDeviceEvent.value.alarmDevice,
      ])
    );
    renderDay30Alarm();
  });
</script>

<template>
  <div class="vls-device flex">
    <div class="vls-device-left flex-col border-light w-[30%]">
      <SubTitle title="智能设备情况" />
      <div class="vls-device-items flex-col">
        <!-- 设备类型占比 -->
        <div class="vls-device-item vls-device-type" style="margin-top: 2vh">
          <div class="title color-light">设备类型占比</div>
          <div class="device-type-data flex">
            <div ref="chartDeviceType" class="w-full h-[20vh]"></div>
          </div>
        </div>
        <!-- 故障设备情况 -->
        <div class="vls-device-item vls-device-fault" style="margin-top: 2vh">
          <div class="title color-light">故障设备情况</div>
          <div class="vls-device-item-data device-fault-data">
            <div class="device-item-data-counts fualt-data-counts flex">
              <TextData
                style="width: 45%"
                bg="bg3"
                value-color="#c280ff"
                name="故障设备数量"
                :value="dataDeviceFault.count"
                :reverse="true"
              />
              <TextData
                style="width: 45%"
                bg="bg3"
                value-color="#c280ff"
                name="故障设备占比"
                :value="dataDeviceFault.rate"
                :reverse="true"
              />
            </div>
            <div class="fault-data-devices" style="margin-top: 1vh">
              <ScrollTable
                size="small"
                :columns="faultDeviceColumns"
                :data="dataDeviceFault.devices"
                :height="120"
              />
            </div>
          </div>
        </div>
        <!-- SIM续费预警 -->
        <div class="vls-device-item vls-device-sim" style="margin-top: 2vh">
          <div class="title color-light">SIM续费预警</div>
          <div class="vls-device-item-data sim-fault-data">
            <div class="device-item-data-counts sim-data-counts flex">
              <TextData
                style="width: 45%"
                bg="bg3"
                value-color="#c280ff"
                name="待续费设备数量"
                :value="dataDeviceSim.count"
                :reverse="true"
              />
              <TextData
                style="width: 45%"
                bg="bg3"
                value-color="#c280ff"
                name="待续费设备占比"
                :value="dataDeviceSim.rate"
                :reverse="true"
              />
            </div>
            <div class="sim-data-devices" style="margin-top: 1vh">
              <ScrollTable
                size="small"
                :columns="simDeviceColumns"
                :data="dataDeviceSim.devices"
                :height="120"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="vls-device-center flex-col border-light">
      <div class="vls-device-items flex-col">
        <div class="vls-device-ov-items flex">
          <div
            v-for="(item, index) of dataOverviews"
            :key="'ov_item-' + index"
            class="cls-device-ov-item"
          >
            <div class="item-img">
              <img :src="item.img" />
            </div>
            <div class="item-box">
              <div class="box-name">{{ item.name }}</div>
              <div class="box-value">{{ item.value }}</div>
            </div>
          </div>
        </div>
        <div class="vls-device-hotmap">
          <SubTitle title="区域设备分布" />
        </div>
        <div class="vls-device-ov flex">
          <TextData
            v-for="(item, i) of dataDeviceType"
            :key="'da-' + i"
            style="width: 80px; padding: 15px 0"
            :reverse="true"
            :name="item.name"
            :value="item.value"
          />
        </div>
      </div>
    </div>
    <div class="vls-device-right flex-col border-light w-[30%]">
      <SubTitle title="设备事件统计" />
      <div class="vls-device-items flex-col">
        <div class="vls-device-ov">
          <div class="device-event-item">
            <div class="title">今日告警事件数量</div>
            <div class="value">
              <span style="color: #ffff00">{{
                dataDeviceEvent.alarmEventToday.untreated
              }}</span
              >{{ dataDeviceEvent.alarmEventToday.total? dataDeviceEvent.alarmEventToday.total: '/' }}
            </div>
            <div class="desc">未处理/全部</div>
          </div>
          <div class="device-event-item">
            <div class="title">昨日告警事件数量</div>
            <div class="value">
              <span style="color: #ffff00">{{
                dataDeviceEvent.alarmEventYesterday.untreated
              }}</span
              >{{ dataDeviceEvent.alarmEventYesterday.treated? dataDeviceEvent.alarmEventYesterday.treated: '/' }}
            </div>
            <div class="desc">未处理/已处理</div>
          </div>
        </div>
        <!-- 设备报警实时数据（今日未处理） -->
        <div
          class="vls-device-item vls-device-realtime"
          style="margin-top: 2vh"
        >
          <div class="title color-light">设备报警实时数据（今日未处理）</div>
          <div class="device-realtime" style="margin-top: 2vh">
            <ScrollTable
              size="small"
              :columns="alarmReltimeColumns"
              :data="dataDeviceEvent.deviceAlarmRealTime"
              :height="120"
            />
          </div>
        </div>
        <!-- 告警设备占比 -->
        <div class="vls-device-item vls-device-alarm" style="margin-top: 2vh">
          <div class="title color-light">告警设备占比</div>
          <div class="device-alarm" style="margin-top: 2vh">
            <div ref="chartDeviceAlarm" class="w-full h-[16vh]"></div>
          </div>
        </div>
        <!-- 30日报警数据趋势图 -->
        <div
          class="vls-device-item vls-device-day30alarm"
          style="margin-top: 2vh"
        >
          <div class="title color-light">30日报警数据趋势图</div>
          <div class="device-day30alarm" style="margin-top: 2vh">
            <div ref="chartDay30Alarm" class="w-full h-[18vh]"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less">
  .vls-device {
    column-gap: 30px;
  }

  .vls-device-items {
    flex: 1;
    justify-content: space-between;

    .vls-device-item {
      .vls-device-item-data {
        padding: 2vh 10px 0 10px;

        .device-item-data-counts {
          justify-content: space-between;
        }
      }
    }
  }

  .vls-device-ov {
    // padding-left: 12%;
    // padding-right: 12%;
    background-image: url('@/assets/images/common/data_box1.png');
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 0 5px;
    column-gap: 10px;
    justify-content: center;
  }

  .vls-device-left {
  }

  .vls-device-center {
    flex: 1;

    .vls-device-ov-items {
      justify-content: space-between;
      padding: 0 5%;
      margin-top: 1vh;

      .cls-device-ov-item {
        width: 30%;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;

        .item-img {
          width: 60%;
          img {
            width: 100%;
            height: 100%;
          }
        }

        .item-box {
          width: 80%;
          padding: 10px 20px;
          border: 1px solid #00f9ff;
          border-radius: 4px;
          margin-top: 1vh;

          .box-name {
          }
          .box-value {
            color: #c280ff;
            font-size: 22px;
            font-weight: bold;
          }
        }
      }
    }

    .vls-device-ov {
      column-gap: 20px;
    }
  }

  .vls-device-right {
    .vls-device-ov {
      margin-top: 2vh;
      padding: 15px 20px;
      display: flex;
      justify-content: center;
      column-gap: 10%;
      text-align: center;

      .title {
      }

      .value {
        color: #00f9ff;
        font-size: 20px;
        font-weight: bold;
        margin: 2px 0 8px;
      }

      .desc {
        color: #aaaaaa;
        font-size: 14px;
      }
    }
  }
</style>
